<template>
  <div class="form-designer-field-list">
    <div :class="['form-designer-field-list-item', {'form-designer-field-list-item-selected': selectedField === item.id}]"
         @click="() => select(item)" v-for="item in dataSource" :key="item.id">
      <div class="form-designer-field-list-item-title" :data-role="fieldRole"
           :data-field-id="item.id"
           :draggable="!!fieldRole? true : undefined" :title="item.label">
        {{item.label}}
      </div>
      <div class="form-designer-field-list-item-action" @click.stop @mousedown.stop>
        <slot name="action" :field="item">
          <a-dropdown :trigger="['click']">
            <a-button icon="setting" shape="circle" size="small"/>
            <a-menu slot="overlay">
              <a-menu-item @click="() => remove(item)">
                <a href="javascript:;"><a-icon class="form-domain-action-icon" type="delete" />删除</a>
              </a-menu-item>
              <a-menu-item @click="() => moveUp(item)">
                <a href="javascript:;"><a-icon class="form-domain-action-icon" type="arrow-up" />上移</a>
              </a-menu-item>
              <a-menu-item @click="() => moveDown(item)">
                <a href="javascript:;"> <a-icon class="form-domain-action-icon" type="arrow-down" />下移</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </slot>
      </div>
    </div>
  </div>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';

export default {
  name: 'FieldList',
  model: createModelForVue('dataSource'),
  props: {
    canRemove: createProps(Function),
    dataSource: createProps(Array),
    selectedField: createProps(String),
    fieldRole: createProps(String),
  },
  methods: {
    select(item) {
      this.$emit('selectedChange', item.id)
    },
    moveUp(item) {
      let index = this.dataSource.findIndex(i => i === item);
      if(index < 0) return;
      let index1 = index - 1;
      index1 = Math.min(index1, this.dataSource.length - 1);
      index1 = Math.max(index1, 0);
      this.swip(index, index1);
    },
    moveDown(item) {
      let index = this.dataSource.findIndex(i => i === item);
      if(index < 0) return;
      let index1 = index + 1;
      index1 = Math.min(index1, this.dataSource.length - 1);
      index1 = Math.max(index1, 0);
      this.swip(index, index1);
    },
    swip(index, index1) {
      if(index === index1) return;
      let temp = this.dataSource[index]
      this.dataSource[index] = this.dataSource[index1]
      this.dataSource[index1] = temp;

      this.$emit('change', [...this.dataSource]);
    },
    remove(field) {
      if (this.canRemove && !this.canRemove(field)) {
        return;
      }

      this.$confirm({
        title: '确定删除吗?',
        content: '删除后不可恢复, 确定删除吗?',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          this.$emit('change', this.dataSource.filter(i => i !== field));
          if (field.id === this.selectedField) {
            this.$emit('selectedChange');
          }
          this.$emit('removed');
        }
      });
    },
  }
}
</script>